@import "frappe/public/scss/desk/css_variables";
@import "frappe/public/scss/website/variables";
@import "frappe/public/scss/website/index";
@import "frappe/public/scss/common/awesomeplete";
@import "frappe/public/scss/common/buttons";
@import "frappe/public/scss/common/mixins";
@import "frappe/public/scss/common/controls";
@import "frappe/public/scss/desk/timeline";
@import "frappe/public/scss/desk/form";
@import "frappe/public/css/fonts/inter/inter";
@import "frappe/public/css/octicons/octicons.css";

body {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
		"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
		sans-serif;
}

// diff
textarea.wiki-content {
	font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier,
		monospace;
	font-size: $font-size-sm;
}

.nav-tabs {
	font-size: var(--font-size-sm);
}

.wiki-preview {
	min-height: 600px;
}

.wiki-footer {
	border-top: 1px solid $border-color;
	margin-top: 2rem;

	.forward-back {
		height: 35px;
	}
}

.wiki-diff {
	max-width: 700px;

	.diff {
		font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier,
			monospace;
		font-size: $font-size-sm;
		border: 1px solid $border-color;
		border-radius: 0.5rem;
		overflow: auto;

		display: flex;
		flex-direction: column;
		flex-wrap: wrap;

		div {
			padding: 0.25rem 0.5rem;
			background-color: $light;
			color: $body-color;
		}

		.control {
			color: $gray-500;
			background-color: $input-bg;
		}

		.delete {
			background-color: #fff5f5;
			color: $gray-900;
		}

		.insert {
			background-color: #f0fff4;
			color: $gray-900;
		}
	}
}
.wiki-revision-meta {
	font-size: $font-size-sm;
	display: flex;
	justify-content: space-between;
}

// sidebar

.sidebar-group {
	margin: 0;
	font-style: normal;
	font-weight: 500;
	font-size: $font-size-base;
	line-height: 1.72;
	/* identical to box height, or 28px */

	letter-spacing: -0.011em;

	padding-left: 0.25rem;
}
.sidebar-group {
	ul.list-unstyled {
		padding-left: 0.65rem;
		ul {
			padding-left: 0.65rem;
		}
	}

	.collapsible {
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
		display: flex;
		align-items: center;
	}

	.active {
		border-radius: 4px;
		color: $primary;
		background-color: #ebf5ff;
	}

	div {
		cursor: pointer;
		flex-basis: 100%;
		flex-wrap: wrap;
		.h6 {
			font-size: $font-size-sm;
			margin-bottom: 0;
			line-height: 1.5;
		}
	}

	.sidebar-item {
		font-style: normal;
		font-weight: normal;
		font-size: 1px;
		line-height: 1.5;
		/* identical to box height, or 24px */
		color: $text-muted;
		letter-spacing: -0.011em;
		padding: 0.375rem 0.8rem 0.375rem 0.8rem;
		margin-right: 0.8rem;
		div {
			display: flex;
		}

		a {
			margin: 0;
			padding-left: 0;
			padding-top: unset;
			padding-bottom: unset;
			font-weight: normal;
			width: 100%;
		}
	}

	.sidebar-item:hover {
		background-color: #ebf4ff;
	}

	.drop-icon,
	.drop-left {
		display: inline-flex;
	}

	.management {
		padding-top: 1rem;
		border-top: 1px solid #eef0f2;
	}
}

.sidebar-item div {
	display: flex;
}
.sidebar-column {
	width: clamp(240px, 20%, 320px);
}

.sm-sidebar .web-sidebar {
	padding-bottom: 2rem;
}

.doc-sidebar {
	height: 90vh;
	margin-bottom: 0;
	margin-top: 3.5rem;
	.web-sidebar {
		margin-bottom: 8px;
		margin-right: -0.5rem;
		padding-top: 0;
		padding-bottom: 0;
		.sidebar-items > .list-unstyled > .sidebar-item {
			margin-left: -0.5rem;
		}
		.sidebar-items > .list-unstyled > .sidebar-group {
			margin-left: -0.7rem;
		}
	}

	.management {
		margin-bottom: 0;
	}
}

@media (min-width: 992px) {
	.doc-sidebar {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}
}

// navbar
.navbar-nav {
	height: 100%;
	.dropdown-menu {
	    position: sticky;
	}
	
}

.nav-item {
	margin-left: 24px;

	#search-container {
		width: 312px;
		height: 100%;
		padding-right: 0px;
		padding-left: 0px;
		.dropdown {
			height: 100%;

			input {
				height: 100%;
				background: #f4f5f6;
				border-radius: 4px;
			}
		}
	}

	.nav-link {
		font-style: normal;
		font-weight: normal;
		font-size: $font-size-base;
		line-height: 150%;
		/* identical to box height, or 24px */

		letter-spacing: -0.011em;

		color: $body-color;
		padding-left: 0rem !important;
		padding-right: 0rem !important;
	}

	select {
		height: 100%;
	}
}
.navbar {
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 1020;

	.container {
		height: 36px;
	}
}

.navbar-light {
	border-bottom: 0;
}

.navbar.navbar-light.navbar-expand-lg {
	border-bottom: 1px solid $gray-200;
}

.navbar.navbar-light.navbar-expand-lg {
	border-bottom: 1px solid $gray-200;
}

.doc-layout {
	padding-top: 0rem;
}

.navbar-brand {
	img {
		max-height: 18px;
	}
}

// main-content
.main-column {
	flex-grow: 100;
	width: clamp(240px, 60%, 870px);
	text-align: left;
	.page-content-wrapper {
		margin-top: 3.5rem;
		padding-top: 2rem;
		padding-bottom: 0;
	}
}

.wiki-flex {
	flex-wrap: nowrap;
}

.doc-content .from-markdown > :first-child {
	margin-top: 0;
}

.doc-content {
	.from-markdown {
		h2 {
			margin-top: 2.5rem;
		}
	}
}

// toc
.page-toc {
	width: clamp(192px, 20%, 240px);
	div {
		width: 100%;
		margin-top: 0;
		margin-bottom: 0;
		padding-top: 2rem;
		padding-bottom: 2rem;
		ul {
			padding-bottom: 0;
			margin-bottom: 0;
		}

		.h5 {
			font-style: normal;
			font-weight: 500;
			font-size: $font-size-xs;
			line-height: 1.35;
			color: $headings-color;
		}
	}

	li {
		padding-left: 4px;
		margin: 2px 0;
	}

	.active {
		border-radius: 4px;
		color: $primary;
		background-color: #ebf4ff;
		border-left: 3px solid $primary;
		border-radius: 0.1rem 0.375rem 0.375rem 0.1rem;
	}

	a {
		padding: 0.25rem;
	}
}

.breadcrumb-item + .breadcrumb-item::before {
	content: "";
	display: none;
}

.breadcrumb-item + .breadcrumb-item {
	padding-left: 0;
}

@media (min-width: 1920px) {
	.doc-container {
		max-width: 1440px;
	}
}

.doc-sidebar {
	padding-right: 0.5rem;
}

.sidebar-group > ul {
	margin-bottom: 0.5rem;
}

ul.user-contributions {
	list-style-type: none;
	display: flex;
	padding-left: 0;
	flex-wrap: wrap;
}

ul.user-contributions li {
	margin: 0 4px;
}

/*
====
breadcrumbs
====
*/

.doc-content .breadcrumb-container {
	margin-top: 0rem; /* spacing adjusment for breadcrumb */
	margin: 0;
	padding: 0;
}

ol.breadcrumb {
	font-size: $font-size-xs;

	li [itemprop="item"] {
		align-self: center;
	}
}

/*
====
navbar
====
*/

.navbar .navbar-light .navbar-expand-lg {
	width: 100%;
	position: fixed;
	top: 0; /*ensure navbar stays affixes to the top*/
	left: 0;
	right: 0;
}

@media (max-width: 767px) {
	.navbar {
		position: inherit;
	}

	.navbar-expand-lg .doc-container {
		padding-left: 0;
		padding-right: 0;
	}
	.web-sidebar {
		padding-top: 0;
	}

	.web-sidebar > a {
		display: none;
	}

	.page-content-wrapper {
		margin-top: 0 !important;
	}

	.wiki-footer {
		.btn.left,
		.btn.right {
			width: 100%;
			margin-bottom: 10px;
		}
	}

	.nav-item {
		margin-left: 10px;
	}
	.search-nav-item {
		height: 2.2rem;
	}
	// #dropdownMenuSearch {
	//   margin-right: 20px;
	// }
}

.my-contributions,
.new-wiki-page,
.add-sidebar-item {
	padding: 0.25rem 0.5rem 0.25rem 0;
	cursor: pointer;
	margin-top: 1rem;
}

.web-footer {
	border-top: 1px solid #eef0f2;
}

.search-nav-item {
	position: relative;

	svg {
		top: 10px;
		right: 12px;
		position: absolute;
	}
}

// contributions page

.contributions-header {
	margin: 2rem 0 1.5rem 0;
	font-size: $font-size-xl;
	font-weight: 700;
	line-height: 16px;
}

.count {
	font-size: var(--text-xs);
    background-color: var(--gray-500);
    border-radius: var(--border-radius-sm);
    color: var(--gray-50);
    padding: 0 var(--padding-xs);
    margin-right: var(--margin-xs);
}

img::after{
	content: '';
}

img[alt]::after{
	width: unset;
	height: unset;
}